<script setup>
import { ref, onMounted } from "vue";

import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
import {getDistrictWarningList} from './common'
defineProps({
    msg: String,
});
const colorDirctList = ref([])
var map = ref({})
var bounds=ref([])
var mask = ref([])
const aMapInit = () => {
    let district = new AMap.DistrictSearch(opts);
    district.search("金华", function (status, result) {
         bounds.value = result.districtList[0].boundaries;
         mask.value = [];
        for (var i = 0; i < bounds.value.length; i += 1) {
            mask.value.push([bounds.value[i]]);
        }
        map.value= new AMap.Map("container", {
            mask: mask.value,
            center: [120.037036, 29.149549],
            disableSocket: true,
            viewMode: "3D",
            showLabel: true,
            labelzIndex: 130,
            pitch: 0,
            zoom: 10.3,
            layers: [
                new AMap.TileLayer(),
                new AMap.TileLayer.Satellite(),
            ],
        });
        var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
        map.value.add(object3Dlayer);
        colorDirctList.value.forEach((item) => {
            new AMap.Polygon({
                map: map.value,
                path: item.polygons, //设置多边形边界路径
                strokeColor: "#FF33FF", //线颜色
                strokeOpacity: 0.2, //线透明度
                strokeWeight: 3, //线宽
                fillColor: item.level == '1' ? 'green' : item.level == '2' ? 'yellow' : 'red',
                fillOpacity: 0.35 //填充透明度
            });
        })
    });
}
const addColor=()=>{
    
}
onMounted(() => {
    colorDirctList.value = getDistrictWarningList()
    aMapInit()
    addColor()
});

var opts = {
    subdistrict: 0,
    extensions: "all",
    level: "district",
};
var optsStr = {
    subdistrict: 1,
    extensions: "all",
    level: "street",
};
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
const addPoint = () => {
    var marker = new AMap.Marker({
        position: new AMap.LngLat(116.39, 39.9),
        offset: new AMap.Pixel(-10, -10),
        icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL
        title: "北京",
    });

    map.add(marker);
};
</script>

<template>
    <div class="map-box">

        <div id="container"></div>
        <div :class="'model-box-card1'">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>Card name</span>

                    </div>
                </template>
                <div v-for="i in 4" :key="i" class="text item">{{ 'List item ' + i }}</div>
                <template #footer>Footer content</template>
            </el-card>
        </div>
        <div :class="'model-box-card2'">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>Card name</span>

                    </div>
                </template>
                <div v-for="i in 4" :key="i" class="text item">{{ 'List item ' + i }}</div>
                <template #footer>Footer content</template>
            </el-card>
        </div>
        <div :class="'model-box-card3'">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>Card name</span>

                    </div>
                </template>
                <div v-for="i in 4" :key="i" class="text item">{{ 'List item ' + i }}</div>
                <template #footer>Footer content</template>
            </el-card>
        </div>
        <div :class="'model-box-card4'">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>Card name</span>

                    </div>
                </template>
                <div v-for="i in 4" :key="i" class="text item">{{ 'List item ' + i }}</div>
                <template #footer>Footer content</template>
            </el-card>
        </div>
    </div>
</template>

<style scoped>
#container {
    width: 100%;
    height: 100%;
    /* background-color: #04162c !important; */
}

.map-box {
    width: 100%;
    height: 100%;
    position: relative;
}

#container {
    width: 100%;
    height: 100%;
    background-color: #04162c !important;
}

.model-map-box {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    z-index: 999999;
    width: 100%;
    height: 100%;
}

.model-map-innerbox {
    padding: 20px;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.el-card {
    width: 100%;
    background-color: rgba(30, 30, 30, .3);
}



.model-box-card1 {
    position: absolute;
    width: 20%;
    height: 30%;
    z-index: 999999;
    top: 20px;
    left: 20px;

}

.model-box-card2 {
    position: absolute;
    width: 20%;
    height: 30%;
    z-index: 999999;
    top: 20px;
    right: 20px;

}

.model-box-card3 {
    position: absolute;
    width: 20%;
    height: 30%;
    z-index: 999999;
    left: 20px;
    bottom: 20px;

}

.model-box-card4 {
    position: absolute;
    width: 20%;
    height: 30%;
    z-index: 999999;
    right: 20px;
    bottom: 20px;

}

.box-card {
    color: #fff;
}

/* #04162c */
</style>
